<template>
	<a-row :gutter="10" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-col :span="24">
			<a-card :bordered="false">
				<a-row :gutter="10">
					<a-col :span="24">
						<a-space>
							<a-input placeholder="请输入内容" v-model="search" clearable></a-input>
							<a-button type="primary" @click="queryList">刷新</a-button>
							<a-button @click="add">新增</a-button>
						</a-space>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
	</a-row>
	<a-row :gutter="10">
		<a-col :span="24">
			<a-card :bordered="false">
				<h-table :paged="true" ref="tableRef" :data="loadData" :columns="columns">

				</h-table>
			</a-card>

		</a-col>
	</a-row>


	<drag-modal v-model:visible="visible" @ok="save" width="400px" @close="visible = false" :closable="false">
		<a-form :model="dsDiag" :rules="formRules" ref="formRef">
			<a-form-item label="账号" name="account">
				<a-input :disabled="dsDiag.id != null" v-model:value="dsDiag.account"></a-input>
			</a-form-item>

			<a-form-item label="姓名" name="name">
				<a-input v-model:value="dsDiag.name"></a-input>
			</a-form-item>


			<a-form-item label="电话">
				<a-input v-model:value="dsDiag.phone"></a-input>
			</a-form-item>
			<a-form-item label="年龄" name="age">
				<a-input v-model:value="dsDiag.age"></a-input>
			</a-form-item>
			<a-form-item label="出生日期">
				<a-date-picker value-format="YYYY-MM-DD" v-model:value="dsDiag.birthday" />
			</a-form-item>
			<a-form-item label="毕业院校">
				<a-input v-model:value="dsDiag.college"></a-input>
			</a-form-item>
			<a-form-item label="文化程度">
				<a-input v-model:value="dsDiag.cultureLevel"></a-input>
			</a-form-item>

			<a-form-item label="学位">
				<a-input v-model:value="dsDiag.degree"></a-input>
			</a-form-item>


			<a-form-item label="学制">
				<a-input v-model:value="dsDiag.eduLength"></a-input>
			</a-form-item>


			<a-form-item label="学历">
				<a-input v-model:value="dsDiag.education"></a-input>
			</a-form-item>

			<a-form-item label="邮箱">
				<a-input v-model:value="dsDiag.email"></a-input>
			</a-form-item>

			<a-form-item label="紧急联系人地址">
				<a-input v-model:value="dsDiag.emergencyAddress"></a-input>
			</a-form-item>

			<a-form-item label="紧急联系人">
				<a-input v-model:value="dsDiag.emergencyContact"></a-input>
			</a-form-item>

			<a-form-item label="紧急联系人电话">
				<a-input v-model:value="dsDiag.emergencyPhone"></a-input>
			</a-form-item>

			<a-form-item label="性别">
				<a-radio-group v-model:value="dsDiag.gender" :options="genderOptions" />
			</a-form-item>

			<a-form-item label="家庭住址">
				<a-input v-model:value="dsDiag.homeAddress"></a-input>
			</a-form-item>

			<a-form-item label="家庭电话">
				<a-input v-model:value="dsDiag.homeTel"></a-input>
			</a-form-item>

			<a-form-item label="证件号码">
				<a-input v-model:value="dsDiag.idCardNumber"></a-input>
			</a-form-item>

			<a-form-item label="证件类型">
				<a-input v-model:value="dsDiag.idCardType"></a-input>
			</a-form-item>

			<a-form-item label="通信地址">
				<a-input v-model:value="dsDiag.mailingAddress"></a-input>
			</a-form-item>

			<a-form-item label="民族">
				<a-input v-model:value="dsDiag.nation"></a-input>
			</a-form-item>

			<a-form-item label="籍贯">
				<a-input v-model:value="dsDiag.nativePlace"></a-input>
			</a-form-item>

			<a-form-item label="昵称">
				<a-input v-model:value="dsDiag.nickname"></a-input>
			</a-form-item>

			<a-form-item label="办公电话">
				<a-input v-model:value="dsDiag.officeTel"></a-input>
			</a-form-item>

			<a-form-item label="政治面貌">
				<a-input v-model:value="dsDiag.politicalOutlook"></a-input>
			</a-form-item>

			<a-form-item label="备注">
				<a-input v-model:value="dsDiag.remark"></a-input>
			</a-form-item>
		</a-form>
	</drag-modal>
</template>

<script setup name="datasource">
import userApi from '@/api/mobile/resource/userApi.js'
import tool from "@/utils/tool";
import { required } from '@/utils/formRules'

const search = ref()
const tableRef = ref()

const viewFlag = ref(false);
const visible = ref(false);
const dsDiag = ref({})
const columns = ref([
	{
		title: '账号',
		dataIndex: 'account',
		key: 'account',
		ellipsis: true,
	},
	{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
		ellipsis: true,
	},
	{
		title: '手机号',
		dataIndex: 'phone',
		resizable: true,
		key: 'phone',
		ellipsis: true,
	},
	{
		title: '出生日期',
		dataIndex: 'birthday',
		key: 'birthday',
		ellipsis: true,
	},
	{
		title: '年龄',
		dataIndex: 'age',
		key: 'age',
		ellipsis: true,
	},
	{
		title: '性别',
		dataIndex: 'genderName',
		key: 'genderName',
		ellipsis: true,
	}, {
		title: '家庭住址',
		dataIndex: 'homeAddress',
		key: 'homeAddress',
		ellipsis: true,
	}, {
		title: '联系电话',
		dataIndex: 'homeTel',
		key: 'homeTel',
		ellipsis: true,
	}, {
		title: '最新登录地址',
		dataIndex: 'latestLoginAddress',
		key: 'latestLoginAddress',
		ellipsis: true,
	}, {
		title: '最新登录设备',
		dataIndex: 'latestLoginDevice',
		key: 'latestLoginDevice',
		ellipsis: true,
	}, {
		title: '最新登录IP',
		dataIndex: 'latestLoginIp',
		key: 'latestLoginIp',
		ellipsis: true,
	}, {
		title: '最新登录时间',
		dataIndex: 'latestLoginTime',
		key: 'latestLoginTime',
		ellipsis: true,
	}, {
		title: '备注',
		dataIndex: 'remark',
		key: 'remark',
		ellipsis: true,
	}, {
		title: '启停状态',
		dataIndex: 'userStatus',
		key: 'userStatus',
		fixed: 'right',
		mapping: [{
			key: 'DISABLE',
			value: '停用'
		},
		{
			key: 'ENABLE',
			value: '启用'
		}],

	}, {
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					handleClick(record)
				},
				render: (record) => {
					return "查看";
				}
			},
			{
				type: "primary",
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				click: (field, record) => {
					setStatusFlag(record)
				},
				render: (record) => {
					return record.userStatus == 'ENABLE' ? '停用' : '启用';
				}
			}
		]
	},
]
)

// 默认要校验的
const formRules = {
	account: [required('请输入账号')],
	name: [required('请输入姓名')],
}

const genderOptions = tool.dictList('GENDER')

const add = () => {
	dsDiag.value = {};
	viewFlag.value = false
	visible.value = true
}


const handleClick = (r) => {
	dsDiag.value = JSON.parse(JSON.stringify(r))
	viewFlag.value = true
	visible.value = true


}
const edit = (r) => {
	dsDiag.value = JSON.parse(JSON.stringify(r))
	viewFlag.value = false
	visible.value = true
}

const setStatusFlag = async (row) => {
	await userApi.setStatusFlag({
		id: row.id,
		disableFlag: row.userStatus == 'ENABLE' ? 'DISABLE' : 'ENABLE'
	})
	queryList()
}


const formRef = ref();

const save = async () => {
	if (viewFlag.value) {
		visible.value = false;
		viewFlag.value = false;
		return;
	}
	formRef.value
		.validate()
		.then(async () => {
			if (dsDiag.value.id) {
				await userApi.edit(dsDiag.value)
			} else {
				await userApi.add(dsDiag.value)
			}
			dsDiag.value = {}
			visible.value = false;
			viewFlag.value = false;
			queryList();
		})
		.catch(() => {
		})
}

const loadData = async (parameter) => {
	return await userApi.page(Object.assign(parameter));
	// return moduleApi.modulePage(Object.assign(parameter, searchFormState.value)).then((res) => {
	// 	return res
	// })
}

const queryList = () => {
	tableRef.value.refresh(true)
}
</script>

<style scoped></style>
